<template>
  <el-button @click="saveChartDesignerMainData('chartDesignerMain')">保存</el-button>
  <el-button @click="cleanPiniaCacheData('chartDesignerMain')">清除缓存</el-button>
  <el-button>演示：加载BI设计模板,onUpdateDatasetList, onUpdateData, designer.getSaveData()
    方法；源码:/views/chartDesigner/chartDesignerEltabs3/chartDesignerMain.vue
  </el-button>
  <div id="chartDesignerMain" style="width: 1920px; height: 1024px"></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue';

import {usePreviewStore} from "@/stores/modules/xzPreviewStore.ts";

let isPrintInfo = true;
const usePreStore = usePreviewStore();
import {get_Report} from "@/views/chartDesigner/chartDesignerEltabs3/get_report_lsyjkb";

let onUpdateDatasetlist_rtn = [
  {
    name: "商品销售",
    id: "商品销售id",
    fields:
        [
          {
            name: "商品名称",                           //这些name：可以是中文？
            data_type: 3
          },
          {
            name: "区域名称",
            data_type: 3
          },
          {
            name: "销售额",
            data_type: 2
          }
        ],
    params:
        [
          {
            name: "商品名称",                           //这些name：可以是中文？
            data_type: 3
          },
          {
            name: "区域名称",
            data_type: 3
          }
        ]
  },
  {
    name: "商品季度销售",
    id: "商品季度销售id",
    fields: [
      {
        name: "商品",
        data_type: 3
      }, {
        name: "季度",
        data_type: 2

      }, {
        name: "销售额",
        data_type: 2
      }
    ],
    params:
        [
          {
            name: "商品",
            data_type: 3
          },
        ],
  }
]
import {get_onupdatedatamaps} from "@/views/chartDesigner/chartDesignerEltabs3/get_onUpdateDataMaps_ForMain";

let onupdatedatamaps = get_onupdatedatamaps();//复制一份

let report = get_Report();

function saveChartDesignerMainData(chartDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置
  chartDesignerReportData = designer.getSaveData();
  const config = chartDesignerReportData.config;
  const dataConfig = chartDesignerReportData.data.dataConfig;
  usePreStore.saveChartDesignerPreviewData(chartDesignerPreviewId, config, dataConfig);
  console.log("...chartdesignertabs3.main.vue....designer.getSaveData():",designer.getSaveData())
  console.log("...chartdesignertabs3.main.vue....designer.getSaveData().config:",config)
  console.log("...chartdesignertabs3.main.vue....designer.getSaveData().data.dataConfig:",dataConfig);
}

function cleanPiniaCacheData(chartDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置
  usePreStore.cleanChartDesignerPreviewData(chartDesignerPreviewId);
}

//为BI设计器预先提供的外部数据集的记录回显
//为BI设计器预先提供的外部数据集的表结构和查询参数

let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1980px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]

}


//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
const onUpdateDatasetList = () => {
  try {
    return new Promise((resolve, reject) => {
      if (isPrintInfo) {
        console.log("....onUpdateDatasetList,", onUpdateDatasetlist_rtn);
      }
      resolve(onUpdateDatasetlist_rtn)
    })
  } catch (ex) {
    console.log("...onUpdateDatasetList throw ex,", ex);
    return []
  }

}
//onUpdateData没有确定他的用途；json类型是独立的；API服务也是独立的，和外部数据集表结构对应的数据记录？，啥时触发？
const onUpdateData = (datasets, params) => {
  if (isPrintInfo)
    console.log("chartDesignerMain,datasets:", datasets);
  let rtn = [];
  try {
    datasets.forEach((dataset) => {
      if (onupdatedatamaps.get(dataset.name)) {
        rtn.push(onupdatedatamaps.get(dataset.name));
        console.log("....chartDesignerMain,....,拿到的记录::", onupdatedatamaps.get(dataset.name));
      }
    })

    return new Promise((resolve, reject) => {
      // resolve的数据格式
      console.log("*******chartDesignerMain,********* onupdatedata,resolve(data),data:", rtn);
      resolve(rtn);
    })
  } catch (ex) {
    console.log("....onUpdateData throw ex.", ex);
    return rtn
  }


}
option.onUpdateDatasetList = onUpdateDatasetList;
option.onUpdateData = onUpdateData
let designer;
onMounted(() => {
  try {
    designer = new XZChartDesigner("#chartDesignerMain", option, report);
  } catch (error) {
    console.log(".....chartdesignertabs3.main.vue....,.onMount,error:", error);
  }
})
let chartDesignerReportData
const canvasclassname = "xzchart-mCanvas"
const canvasheight = "1024px"

function setcanvasHight() {
  let canvas = document.getElementsByClassName(canvasclassname)[0]
  canvas.style.height = canvasheight
}
</script>

<style scoped>

</style>
